<template>
  <div class="import-history">
    <div class="import-history__hd">
      <span class="import-history__title">查看历史导入记录</span>
      <span class="import-history__des">(错误数据只保存七天,七天后将自动失效)</span>

      <el-button class="xr-icon-close-btn" icon="el-icon-close" @click="closeClick"/>
    </div>

    <el-table :data="tableList" class="import-history__bd" height="250" style="width: 100%">
      <el-table-column prop="createTime" label="导入时间" width="120">
        <template v-slot="scope">
          <!--<template slot-scope="scope">-->
          {{ createTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="realname" label="操作人" width="80"/>
      <el-table-column prop="address" label="导入结果">
        <template v-slot="scope">
          <!--<template slot-scope="scope">-->
          {{ `导入总数据${scope.row.title}条，${getImportContent(scope.row.title, scope.row.content)}` }}
        </template>
      </el-table-column>
      <el-table-column prop="option" width="150" label="操作">
        <template v-slot="scope">
          <!--<template slot-scope="scope">-->
          <template v-if="getErrorNum(scope.row.content) > 0">
            <el-button v-if="scope.row.valid == 1" link @click="downloadError(scope.row.messageId)">
              下载错误数据
            </el-button>
            <span v-else-if="scope.row.valid == 0" class="invalid-tips">已失效</span>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <div class="import-history__ft">
      <el-button type="primary" @click="closeClick">
        关闭
      </el-button>
    </div>
  </div>
</template>


<script setup>
// 导入历史
import {ref, watch} from "vue";

import {
  crmDownImportErrorAPI
} from '/src/api/crm/common.js'

import {downloadExcelWithResData} from '/src/utils/index.js'


defineOptions({
  name: 'CRMImportHistory',
})

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  // CRM类型
  crmType: {
    type: String,
    default: ''
  },
  // moduleType
  props: Object
})

const emits = defineEmits(['close'])


const loading = ref(false)
const tableList = ref([])

// 原来的filter
function createTime(time) {
  const times = time.split(' ')
  return times.length > 0 ? times[0] : ''
}

watch(() => props.show, (value) => {
  if (value) {
    getList()
  }
})


function getList() {
  loading.value = true
  systemMessageListAPI({
    page: 1,
    limit: 9999,
    type: {
      customer: 14,
      contacts: 16,
      leads: 18,
      product: 20,
      hrm: 50
    }[props.crmType] || props.props.moduleType
  })
      .then(res => {
        loading.value = false
        tableList.value = res.data.data.list
      })
      .catch(() => {
        loading.value = false
      })
}

/**
 * 下载错误数据
 */
function downloadError(messageId) {
  crmDownImportErrorAPI({messageId})
      .then(res => {
        downloadExcelWithResData(res)
      })
      .catch(() => {
      })
}

function getImportContent(totalSize, content) {
  const list = content.split(',') || []
  const updateSize = Number(list[1] || '0')
  const errSize = Number(list[0] || '0')
  return `覆盖${updateSize}条，导入成功${totalSize - errSize}条，导入失败${errSize}条。`
}

/**
 * 获取错误数据数
 */
function getErrorNum(content) {
  const list = content.split(',') || []
  const errSize = Number(list[0] || '0')
  return parseInt(errSize)
}


/**
 * 关闭
 */
function closeClick() {
  emits('close')
}


</script>

<script>


export default {

  components: {},
  filters: {},
  props: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  mounted() {
  },

  beforeDestroy() {
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.import-history {
  &__hd {
    padding: 20px;
    padding-bottom: 10px;
  }

  &__title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
  }

  &__des {
    font-size: 12px;
    color: #ccc;
  }

  &__bd {
    border-top: 1px solid #e6e6e6;
  }

  &__ft {
    padding: 10px;
    background-color: #F7F8FA;

    text-align: right;
  }

  .xr-icon-close-btn {
    float: right;
  }
}

.invalid-tips {
  color: #999;
}
</style>
